import React, { useState, useEffect, } from 'react'
import { Col, Form, Input, Button, Table, DatePicker, Select, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchWithdrawSum,
  fetchWithdrawInfo,
} from '@/services/distribution/commission'

const { Option } = Select
const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const statusList = [
  {
    label:"已发送",
    value:"2"
  },
  {
    label:"驳回",
    value:"3"
  },
  {
    label:"发送失败",
    value:"4"
  },
  {
    label:"发送中",
    value:"5"
  }
]
const col = [
  {
    key:"index",
    title:"序号",
    dataIndex:'index',
    render: (t, r, i) => <>{i + 1}</>
  },
  {
    title:'昵称/手机号',
    dataIndex:'loginName',
    key:'loginName'
  },
  {
    title:'申请时间',
    dataIndex:'requestTime',
    key:'requestTime'
  },
  {
    title:'提现金额(元)',
    dataIndex:'withdrawPrice',
    key:'withdrawPrice'
  },
  {
    title:'实付金额(元)',
    dataIndex:'actuallyPaid',
    key:'actuallyPaid'
  },
  {
    title:'账号/卡号/OpenID',
    dataIndex:'account',
    key:'account'
  },
  {
    title:'收款人',
    dataIndex:'payee',
    key:'payee'
  },
  {
    title:'提现状态',
    dataIndex:'status',
    key:'status',
    render(text){
      let state = ''
      if(text == '2'){
          status = '已发送';
      }else if(text == '3'){
          status = '驳回';
      }else if(text == '4'){
          status = '发送失败';
      }else if(text == '5'){
          status = "发送中";
      }
      return <div>{status}</div>
    }
  },
  {
    title:'流水号',
    dataIndex:'serialNumber',
    key:'serialNumber'
  },
  {
    title:'支付日期',
    dataIndex:'payTime',
    key:'payTime'
  },
  {
    title:'备注',
    dataIndex:'remark',
    key:'remark'
  }
]
const WithdrawHistory = props => {
  const { form, distribute, } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchWithdrawInfo(params)
    res.code == 0 ? setData(res.data) : message.warn(res.msg)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={8}>
          <Form.Item label={`用户名`}>
            {getFieldDecorator(`userName`, {})
              (<Input />)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`收款人`}>
            {getFieldDecorator(`payee`, {})
              (<Input />)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`提现状态`}>
            {getFieldDecorator(`status`, {})
              (<Select>
                {
                  statusList.map(s => <Option value={s.value} key={s.value}>{s.label}</Option>)
                }
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`申请日期`}>
            {getFieldDecorator(`datetimerange`, {})
              (<DatePicker />)}
          </Form.Item>
        </Col>
      </>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table 
        columns={col}
      />
    </PageHeaderWrapper>
    )
}

export default Form.create()(WithdrawHistory)
